<!DOCTYPE html>
<html>

	<head>
		@@include('../_include/common-header.html')
		<link rel="stylesheet" type="text/css" href="third/swiper4/animate.min.css" />
		<link rel="stylesheet" href="third/swiper4/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="css/main.min.css" />
	</head>

	<body>
		<div class="logo">
			<a href="index.html"><img src="images/logo.png" /></a>
		</div>
		<div class="nav-box">
			<a href="javascript:void(0)" class="menu-btn"><span class="txt">more</span></a>
			<a href="javascript:void(0)" class="menu-close"></a>
			<div class="nav-bg"></div>
			<nav class="nav-con">
				<ul>
					<li>
						<a href="about.html" class="cur">缘起于发现&思考</a>
					</li>
					<!--<li>
						<a href="case.html">案例</a>
					</li>-->
					<li>
						<a href="brand.html">一品牌一印记</a>
					</li>
					<li>
						<a href="member.html">我们是第三类人群</a>
					</li>
					<li>
						<a href="product-test.html">产品实验</a>
					</li>
					<li>
						<a href="javascript:void(0)" class="J-contact">接触，一起探索</a>
					</li>
				</ul>
			</nav>
		</div>
		<div class="bot-link J-contact"> 突破极限 续写传奇 </div>

		<!--主体内容区块 start-->
		<div class="swiper-container brand-swiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide brand-slide brand-slide-1" data-imgwidth="1600">

				</div>
				<div class="swiper-slide brand-slide brand-slide-2" data-imgwidth="1892">
					<div class="swiper-container swiper-container-inner swiper-container-inner1">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<img src="images/luodian/swiper-img.jpg"/>
								<h4>3D橱窗-罗店龙舟</h4>
							</div>
							<div class="swiper-slide">
								<img src="images/luodian/swiper-img-02.jpg"/>
								<h4>书院</h4>
							</div>
							<div class="swiper-slide">
								<img src="images/luodian/swiper-img.jpg"/>
								<h4>3D橱窗-罗店龙舟</h4>
							</div>
							<div class="swiper-slide">
								<img src="images/luodian/swiper-img-02.jpg"/>
								<h4>书院</h4>
							</div>
						</div>
						<div class="swiper-pagination swiper-pagination-v"></div>
					</div>
				</div>
				<div class="swiper-slide brand-slide brand-slide-3" data-imgwidth="1892">
					<div class="swiper-container swiper-container-inner swiper-container-inner2">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<img src="images/luodian/swiper-img.jpg"/>
								<h4>3D橱窗-罗店龙舟</h4>
							</div>
							<div class="swiper-slide">
								<img src="images/luodian/swiper-img-02.jpg"/>
								<h4>书院</h4>
							</div>
							<div class="swiper-slide">
								<img src="images/luodian/swiper-img.jpg"/>
								<h4>3D橱窗-罗店龙舟</h4>
							</div>
							<div class="swiper-slide">
								<img src="images/luodian/swiper-img-02.jpg"/>
								<h4>书院</h4>
							</div>
						</div>
						<div class="swiper-pagination swiper-pagination-v2"></div>
					</div>
				</div>
				<div class="swiper-slide brand-slide brand-slide-4" data-imgwidth="1800">

				</div>
				<div class="swiper-slide brand-slide brand-slide-5" data-imgwidth="1586">

				</div>
				<div class="swiper-slide brand-slide brand-slide-6" data-imgwidth="1400">

				</div>
				<div class="swiper-slide brand-slide brand-slide-7" data-imgwidth="980">

				</div>
				<div class="swiper-slide brand-slide brand-slide-8" data-imgwidth="1800">

				</div>
				<div class="swiper-slide brand-slide brand-slide-9" data-imgwidth="1700">

				</div>
				<div class="swiper-slide brand-slide brand-slide-10" data-imgwidth="1740">

				</div>
				<div class="swiper-slide brand-slide brand-slide-11" data-imgwidth="987">

				</div>
				<div class="swiper-slide brand-slide brand-slide-12" data-imgwidth="1395">

				</div>
				<div class="swiper-slide brand-slide brand-slide-13" data-imgwidth="1760">

				</div>
			</div>
			<!-- Add Pagination -->
			<div class="swiper-pagination main-pagination"></div>
			<!-- Add Arrows -->
			<div class="swiper-button-next"></div>
			<div class="swiper-button-prev"></div>
		</div>
		<!--主体内容区块 end-->

		<!-- 联系我们弹框模块 start -->
		@@include('../_include/contact-pop.html') 
		<!-- // 联系我们弹框模块 end -->

		<script type="text/javascript" src="third/jquery-2.1.4.min.js"></script>
		<script src="third/stars.js"></script>
		<script src="third/swiper4/swiper.min.js"></script>
		<script src="js/common.min.js"></script>
		<script>
			var brandInforSwiper = new Swiper('.brand-swiper', {
				slidesPerView: 'auto',
				mousewheel: true,
				freeMode: true,
				init: false,
				grabCursor : true,
				autoplay: {
				    delay: 4000,//1秒切换一次
				    disableOnInteraction: false,
				},
				freeModeMomentumBounce : false,
				pagination: {
					el: '.main-pagination',
					type: 'progressbar',
					clickable: true,
				},
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
			});

			function brandSlideSizeSet() {
				var winh = $(window).height() > 500 ? $(window).height() : 500;
				$('.brand-swiper .brand-slide').each(function() {
					var $this = $(this),
						p = $this.data('imgwidth') / 1098,
						width = parseInt(winh * p);
					//console.log(width);
					$this.css("width", width);
				});
				brandInforSwiper.init() // 初始化swiper
			}
			brandSlideSizeSet();
			$(window).resize(brandSlideSizeSet);

			var swiperV = new Swiper('.swiper-container-inner1', {
				direction: 'vertical',
				loop:true,
				grabCursor : true,
				pagination: {
					el: '.swiper-pagination-v',
					clickable: true,
				},
			});

			var swiperV2 = new Swiper('.swiper-container-inner2', {
				direction: 'vertical',
				loop:true,
				grabCursor : true,
				pagination: {
					el: '.swiper-pagination-v2',
					clickable: true,
				},
			});

		</script>
	</body>

</html>